<script setup lang="ts">
import { getOnePoet, getPinyinHtml } from "@/apis";
import { reactive, onMounted, ref, Ref } from "vue";
import type { Poet } from "@/types";
import { BaiduHandler } from "@/apis";
import PoetSource from "@/components/PoetSource.vue";

const mainPoetData = reactive<Poet>({
  title: "",
  author: "杨万里",
  poetMessage: "",
});
const myBaiduHandler = new BaiduHandler();

const htmlString = ref("");

const translatedString = ref("");

const poetID: Ref<number | string> = ref(1);

onMounted(async () => {
  mainPoetData.poetMessage = await getOnePoet();
  mainPoetData.title = "《小池》";
  htmlString.value = getPinyinHtml(mainPoetData.poetMessage);
  translatedString.value =
    "翻译：" + (await myBaiduHandler.translate(mainPoetData.poetMessage));
});

const readAudioHandler = () => {
  myBaiduHandler.fetchAndPlayAudio(mainPoetData.poetMessage);
};
</script>

<template>
  <el-tabs type="border-card">
    <el-tab-pane label="原文与溯源">
      <div>
        <h1>{{ mainPoetData.title }}</h1>
        <h5>{{ mainPoetData.author }}</h5>
        <h3>{{ mainPoetData.poetMessage }}</h3>
        <poet-source :poet-id="poetID"></poet-source>
      </div>
    </el-tab-pane>
    <el-tab-pane label="古诗今译">
      <div>
        <el-row>
          <el-col :span="12">
            <div>
              <h1>{{ mainPoetData.title }}</h1>
              <h5>{{ mainPoetData.author }}</h5>
              <h3>{{ mainPoetData.poetMessage }}</h3>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <h3>{{ translatedString }}</h3>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-tab-pane>
    <el-tab-pane label="汉语拼音">
      <div>
        <h1>{{ mainPoetData.title }}</h1>
        <h5>{{ mainPoetData.author }}</h5>
        <div v-html="htmlString"></div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="诗词诵读">
      <div>
        <h1>{{ mainPoetData.title }}</h1>
        <h5>{{ mainPoetData.author }}</h5>
        <h3>{{ mainPoetData.poetMessage }}</h3>
        <el-button @click="readAudioHandler">播放音频</el-button>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped></style>
